<template>
  <section class="content clear">
    <section class="content-search">
      <div class="fl">
        加入时间 <el-date-picker size="mini" v-model="sear.date" type="daterange" placeholder="选择时间"></el-date-picker>
      </div>
      <div class="fl ml20">
        <el-input size="mini" v-model="sear.keyword" placeholder="请输入姓名或工号/学号"></el-input>
      </div>
      <div class="fl ml20">
        <el-button size="mini" type="primary" @click="search">搜索</el-button>
      </div>
    </section>
    <section class="content-list">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="序号" width="80">
          <template slot-scope="scope">
            {{scope.$index + 1 + page.size * (page.current - 1)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="sn" label="工号/学号" width="180"></el-table-column>
        <el-table-column prop="joinTime" label="加入时间">
          <template slot-scope="scope">
            {{scope.row.joinTime | moment("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column prop="valid" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.valid === 1">正常</span>
            <span class="text-error" v-if="scope.row.valid !== 1">已冻结</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.valid === 1" @click="freezeUser(scope.row.userId)" type="text" size="mini">冻结</el-button>
            <el-button v-if="scope.row.valid !== 1" @click="thawUser(scope.row.userId)" type="text" size="mini">解冻</el-button>
            <el-button type="text" @click="deleteUser(scope.row.userId)" class="text-error" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <section class="content-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </section>
  </section>
</template>

<script>
import { role } from '@/api/index'
export default {
  name: 'roleList',
  props: {
    role: {
      required: true
    }
  },
  data () {
    return {
      currentPage: 1,
      sear: {
        date: '',
        keyword: ''
      },
      page: {
        current: 1,
        total: 0,
        size: 10
      },
      tableData: []
    }
  },
  created () {
    this.getUserByRole(1)
  },
  methods: {
    getUserByRole (val) {
      let req = {
        pageNum: val,
        pageSize: this.page.size,
        startTime: this.sear.date ? this.sear.date[0] : '',
        endTime: this.sear.date ? this.sear.date[1] : '',
        keyword: this.sear.keyword,
        jobId: this.role
      }
      role()._getUserByRole(req).then((res) => {
        if (res.status) {
          this.tableData.length = 0
          this.tableData = res.data.pageData
          this.page.total = res.data.totalCount
        }
      })
    },
    search () {
      this.getUserByRole(1)
      this.page.current = 1
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getUserByRole(1)
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.getUserByRole(val)
    },
    freezeUser (val) {
      this.$confirm('此操作将冻结该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        role()._freezeUser(this.role, val).then((res) => {
          if (res.status) {
            this.$message.success('冻结用户成功')
            this.getUserByRole(this.page.current)
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消冻结'
        })
      })
    },
    thawUser (val) {
      this.$confirm('此操作将解冻该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        role()._thawUser(this.role, val).then((res) => {
          if (res.status) {
            this.$message.success('解冻用户成功')
            this.getUserByRole(this.page.current)
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解冻'
        })
      })
    },
    deleteUser (val) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        role()._deleteRole(this.role, val).then((res) => {
          if (res.status) {
            this.$message.success('删除用户成功')
            this.getUserByRole(this.page.current)
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
